<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 14:57:15
 * @LastEditors: yuxi
 * @LastEditTime: 2023-01-17 09:42:31
-->
<template>
  <div class="mining-map-warpper">
    <div class="mining-map" ref="map"></div>
    <slot></slot>
    <ContentMenu
      :position="contentMenuPosition"
      :visible="contentMenuVisible"
      :contentMenus="activeContentMenus"
    ></ContentMenu>
  </div>
</template>

<script>
import Map from 'ol/Map';
import View from 'ol/View';
import ContentMenu from './components/ContentMenu.vue';

const Events = {
  change: 'change',
  click: 'click',
  dblclick: 'dblclick',
  error: 'error',
  loadend: 'loadend',
  loadstart: 'loadstart',
  moveend: 'moveend',
  movestart: 'movestart',
  pointerdrag: 'pointerdrag',
  pointermove: 'pointermove',
  postcompose: 'postcompose',
  precompose: 'precompose',
  propertychange: 'propertychange',
  rendercomplate: 'rendercomplate',
  singleclick: 'singleclick'
}

export default {
  name: 'MiningMap',
  components: {
    ContentMenu
  },
  props: {
    // 地图中心点
    center: {
      type: Array,
      default () {
        return []
      }
    },
    // 比例尺
    zoom: {
      type: Number,
      default () {
        return 1
      }
    },
    // 最大比例尺
    maxZoom: {
      type: Number,
      default () {
        return undefined
      }
    },
    // 最小比例尺
    minZoom: {
      type: Number,
      default () {
        return undefined
      }
    },
    // 坐标系
    projection: {
      type: String,
      default () {
        return 'EPSG:4326' //'EPSG:3857'  //
      }
    },
    // 启用右键菜单
    useContextMenu: {
      type: Boolean,
      default () {
        return false
      }
    },
    // 自定义菜单
    customContextMenus: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      map: null,
      contextMenus: [],
      events: [],
      contentMenuVisible: false,
      contentMenuPosition: null,
      activeContentMenus: []

    }
  },
  watch: {

  },
  mounted () {
    this.initMap()
  },
  beforeDestroy () {
    if (this.map) {
      this.map.un('contextmenu', this.onContextmenu)
      Object.keys(Events).map(event => {
        this.unEvent(this.map, event)
      })
    }
    this.destroyContextMenu()
  },
  methods: {
    initMap () {
      // console.log(this.$children)
      this.map = new Map({
        target: this.$refs.map,
        // layers: [],
        layers: [],
        view: new View({
          center: this.center.length === 2 ? this.center : [0, 0],
          zoom: this.zoom || 1,
          maxZoom: this.maxZoom,
          minZoom: this.minZoom,
          projection: this.projection
        })
      });
      console.log('MapCom created');
      if (this.useContextMenu) {
        this.map.on('contextmenu', this.onContextmenu)
      }
      this.map.on('change', this.handleChange)
      this.$emit('ready', { map: this.map })

      Object.keys(Events).map(event => {
        this.registerEvent(this.map, event)
      })
    },
    registerEvent (map, event) {
      this.events[event] = (evt) => {
        this.$emit(event, evt)
      }
      map.on(event, this.events[event])
    },
    unEvent (map, event) {
      if (this.events[event]) {
        map.un(event, this.events[event])
      }
    },
    onContextmenu (event) {
      console.log('contextMenu', event)
      this.contentMenuPosition = event.coordinate
      let _contextMenus = this.contextMenus.length > 0 ? this.contextMenus : this.customContextMenus

      let active = this.map.forEachFeatureAtPixel(
        event.pixel,
        function (feature, layer) {
          return {
            feature: feature,
            layer: layer,
          }
        },
        {
          hitTolerance: 10,
        }
      )

      let contentMenus = _contextMenus.map(c => {
        return {
          label: c.name,
          onClick: () => {
            c.handler.call(this, { ...event, selected: [active]})
          }
        }
      })
      console.log('contentMenus', contentMenus)
      this.activeContentMenus = contentMenus
      // if (this.$contextmenu) {
      //   this.$contextmenu({
      //     items: contextMenus.length > 0 ? contextMenus : [
      //       {
      //         label: '获取当前位置',
      //         onClick: () => {
      //           this.showCenter(event.coordinate)
      //         }
      //       },
      //     ],
      //     event: event.originalEvent,
      //     customClass: "ming-map-context",
      //     zIndex: 3,
      //     minWidth: 230 // 
      //   })
      // }

      if (contentMenus.length > 0) {
        event.originalEvent.cancelBubble = true
        event.originalEvent.preventDefault()
        this.contentMenuVisible = true

        return false
      } else {
        this.contentMenuVisible = false

        return true
      }

    },
    showCenter (coordinate) {
      this.$notify({
        title: '当前位置',
        message: `${coordinate[0]},${coordinate[1]}`,
        duration: 2000
      });
    },
    handleChange () {
      console.log('mapChange', arguments)
    }
  }

}
</script>

<style lang="less" scoped>
.mining-map-warpper {
  width: 100%;
  height: 100%;
  position: relative;
}

.mining-map {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>